<template>
    <div class="box">
        <div class="header">
            <div class="logo">MES 生产制造执行系统</div>
        </div>
        <div class="section">

            <div class="section-left"></div>
            <div class="section-right">

                <!--登录框-->
                <div class="item">
                    <div class="title">登录</div>
                    <div class="input-box">
                        <div class="input-item">
                            <input type="text" placeholder="账户名" @blur="inputBlur" @input="inputBlur" v-model="loginModel.userName">
                        </div>
                        <div class="input-item">
                            <input type="password" @keydown.enter="login" placeholder="密码" @blur="inputBlur" @input="inputBlur"  v-model="loginModel.passWord">
                        </div>
                        <div class="input-verifyCode">
                            <input @blur="inputBlur" @input="inputBlur" type="text" placeholder="验证码" v-model="loginModel.code" @keydown.enter="login">
                            <div class="verifyCode" @click="getVerifyCode" title="点击刷新验证码">
                                <img :src="VerifyCodeUrl"  />
                            </div>
                        </div>
                        <div class="input-tool">
                            <label><input  type="checkbox"> 自动登录</label>
                            <a>忘记密码 ?</a>
                        </div>
                        <div class="input-button">
                            <input class="login" type="button" @click="login" value="登录" >
                        </div>
                    </div>
                </div>
                <!--登录框-->

            </div>
        </div>
        <div class="footer">
            <div class="desc">&copy;2024 copyright</div>
        </div>
    </div>
</template>

<script> 
    export default{
        data(){
            return {
                VerifyCodeUrl:null,
                VerifyCode:'',
                loginModel:{
                    userName:'',
                    passWord:'',
                    code:''
                }
            }
        },
        mounted(){
            this.getVerifyCode();
        },
        methods:{

            login(){
                // console.log(this.loginModel);
                if(this.loginModel.userName==''|| this.loginModel.userName==undefined){
                    this.showNotify('请输入用户名');
                    return;
                }
                else if(this.loginModel.passWord==''|| this.loginModel.passWord==undefined){
                    this.showNotify('请输入密码');
                    return;
                }
                else if(this.loginModel.code==''|| this.loginModel.code==undefined){
                    this.showNotify('请输入图片验证码');
                    return;
                }
                else if(this.loginModel.code!=this.VerifyCode){
                    this.showNotify('图片验证码有误，请重新输入');
                    return;
                }

                
                //请求
                this.$http.get('/api/Account',{
                    params:{
                        userName:this.loginModel.userName,
                        passWord:this.loginModel.passWord
                    },
                    loading:this.$loading({target:'.item'})
                })
                .then(res=>{

                    //保存token
                    localStorage.token = res.Data;

                    localStorage.userName = this.loginModel.userName;
                    //设置用户名
                    this.$store.commit('SetUserName',this.loginModel.userName)

                    //跳转
                    this.$router.push({path:'/'});

                })

                
            },
            getVerifyCode(){

                const loading=this.$loading({
                    target:'.verifyCode'
                });
                this.VerifyCode = Math.floor(Math.random()*1000)+'';


                //生成随机数不足4位末尾补0
                this.VerifyCode=this.VerifyCode.padEnd(4,'0')

                this.$http.get('/api/Account/GetVerifyCode',{
                    params:{
                        code:this.VerifyCode
                    },
                    responseType:'blob'
                })
                .then(res=>{
                    //如果生成过验证码 则释放地址
                    if(this.VerifyCodeUrl){
                        window.URL.revokeObjectURL(this.VerifyCodeUrl)
                    }
                    loading.close();


                    let blob = new Blob([res]);
                    //创建临时链接地址
                    this.VerifyCodeUrl = window.URL.createObjectURL(blob);
                })
            },
            inputBlur(e){
                if(e.target.value===''){
                    e.target.classList.add('error-msg');
                }
                else{
                    e.target.classList.remove('error-msg');
                }
            }
        }



    }
</script>

<style scoped>
@import '../../assets/login/index.css';
</style>